<template>
  <div class="app-container">

    <el-alert type="error" title="短信配置仅支持阿里云：https://www.aliyun.com/product/sms" style="margin-bottom: 20px" />

    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="150px">

      <el-form-item label="AssessKeyId">
        <el-input v-model="postForm.accessKeyId" placeholder="accessKeyId" />
      </el-form-item>

      <el-form-item label="AssessKeySecret">
        <el-input v-model="postForm.accessKeySecret" placeholder="accessKeySecret" />
      </el-form-item>

      <el-form-item label="短信签名">
        <el-input v-model="postForm.sign" placeholder="短信签名" />
      </el-form-item>

      <el-form-item label="模板编号">
        <el-input v-model="postForm.tmpl" placeholder="短信模板编号" />
      </el-form-item>


      <el-alert title="短信内容模板应包含${code}参数，实际发送时替换此参数，如：您的验证码${code}，该验证码5分钟内有效，请勿泄漏于他人！"></el-alert>






      <el-row style="margin-top: 20px">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-row>

    </el-form>

  </div>
</template>

<script>
import { fetchDetail, saveData } from '@/api/sys/config/sms'

export default {
  name: 'SmsConfig',
  data() {
    return {
      postForm: {

      },
      loading: false,
      rules: {
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {

    fetchData() {
      fetchDetail().then(response => {
        this.postForm = response.data
      })
    },
    submitForm() {
      console.log(JSON.stringify(this.postForm))

      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        this.loading = true

        saveData(this.postForm).then(() => {
          this.$notify({
            title: '成功',
            message: '短信配置保存成功！',
            type: 'success',
            duration: 2000
          })
        })
        this.loading = false
      })
    }
  }
}
</script>

